<template>
  <div class="">
    <el-form ref="NullValidator" :model="NullValidator" label-width="110px">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="NullValidator.name"></el-input>
      </el-form-item>
      <div class="box" title="字段" style="margin-top:20px;">
        <el-row>
          <template>
            <u-table ref="tableField" :tableData="NullValidator.fields" :tableHeader="columns" @removeObj="removeObj" @getStreamFieldOptions="getStreamFieldOptions"></u-table>
            <el-row type="flex">
              <el-button class="el-table-add-row"  @click="addObj" icon="el-icon-plus"> 添加</el-button>
              <div style="width: 20px"></div>
              <el-button  class="el-table-add-row" @click="getField" icon="el-icon-thumb">获取字段</el-button>
            </el-row>
          </template>
        </el-row>
      </div>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button
          icon="el-icon-back"
          @click="cancel">取消
        </el-button>
        <el-button
          type="primary" icon="el-icon-check"
          @click="handleSaveData()">确定
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
import API from '../../../../../api/index'
import TableFileds from '../../../table/flink-table-fields.vue'
import mxgraph from '../../../../../graph/VueMxGraphLoader'
import xmlToFlinkJSON from '../../../../../utils/xmlToFlinkJson'
import {flinkInputFields} from "../../../../../api/modules/trans"
/* eslint-disable new-cap */
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'NullValidator',
  props: {
    name: String
  },
  components: {
    'u-table': TableFileds
  },
  data () {
    return {
      graph: null,
      NullValidator: {
        type: 'NullValidator',
        name: '',
        fields: []
      },
      temp: {
        type: 'NullValidator',
        name: '',
        fields: []
      },
      columns: [
        { type: 'select', prop: 'column_name', label: '输入字段' },
        // { type: 'input', prop: 'out_stream_name', label: '输出字段(可空)' },
        // { type: 'select', prop: 'use_regex', label: '使用正则表达式' },
        // { type: 'input', prop: 'replace_string', label: '替换值' },
        // { type: 'input', prop: 'replace_by_string', label: '被替换值' },
        // { type: 'select', prop: 'set_empty_string', label: '设置为空串?' },
        // { type: 'select', prop: 'replace_field_by_string', label: '使用字段值替换' },
        // { type: 'select', prop: 'whole_word', label: '整个单词匹配' },
        // { type: 'select', prop: 'null_allowed', label: '是否允许为空' }
      ]
    }
  },
  methods: {
    loadData (data) {
      if (data) {
        this.$forceUpdate()
        this.NullValidator = Object.assign({}, data)
      }
    },
    // 保存表单数据
    handleSaveData () {
      this.$emit('savePluginData', this.NullValidator)
      this.NullValidator = Object.assign({}, this.temp)
    },
    cancel () {
      this.$emit('cancel')
      this.NullValidator = Object.assign({}, this.temp)
    },
    // 重置表单数据
    resetFormData (stepname) {
      this.$forceUpdate()
      this.NullValidator.name = stepname
    },

    setGraph (val) {
      this.graph = val
    },
    addObj () {
      this.NullValidator.fields.push({})
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
    },
    removeObj (index) {
      this.NullValidator.fields.splice(index, 1)
    },
    async getField () {
      const self = this
      self.NullValidator.fields = []
      let streamFields = await this.getStreamField()
      var tempFileds = []
      streamFields.data.data.data.fields.forEach(element => {
        let obj = {}
        // obj['in_stream_name'] = element.name
        obj.column_name = element.name
        // obj['set_empty_string'] = 'N'
        // obj['whole_word'] = 'N'
        // obj['case_sensitive'] = 'N'
        // obj['use_regex'] = 'N'
        // obj['null_allowed'] = 'N'
        tempFileds.push(obj)
      })
      self.$set(self.NullValidator, 'fields', tempFileds)
    },
    async   getStreamField () {
      const value = await this.getXml()
      if (this.NullValidator.name) {
        return API.trans.flinkInputFields(value, {'stepName': this.NullValidator.name})
      }
    },
    getXml () {
      // this.saveTempPluginData(this.NullValidator)
      // const graph = this.graph
      // const enc = new mxCodec(mxUtils.createXmlDocument())
      // const node = enc.encode(graph.getModel())
      // const value = mxUtils.getPrettyXml(node)
      // return value
      this.saveTempPluginData(this.NullValidator)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      let queryParJson = xmlToFlinkJSON.xmlToFlinkModels(node)
      queryParJson.models.model["step_name"] = this.NullValidator.name
      queryParJson.models.model["step_type"] = "NullValidator"
      return queryParJson
    },
    async getStreamFieldOptions () {
      let result = await this.getStreamField()
      this.$refs['tableField'].setOptions(result)
    },
    saveTempPluginData (formData) {
      this.$emit('saveTempPluginData', formData)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}
.box{
  position:relative;
  border:1px solid #dcdfe6;
  padding:30px 5px 10px 5px;
}
.box::before{
  content:attr(title);
  position:absolute;
  top: 0%;
  left:10%;
  transform:translateX(-50%);
  -webkit-transform:translate(-50%,-50%);
  padding:0px 10px;
  background-color:#fff;
}
</style>
